<template>
  <div class="app-container" v-loading="editloading">
    <div class="openSucai" type="text" @click="useImg"><i class="el-icon-upload"/>打开素材库</div>
    <Sucai ref="sucai"/>


    <el-dialog
      :title="`预览海报${imgtitle}`"
      :visible.sync="haibaoRev"
      :fullscreen="true"
      width="840"
    >
      <div style="text-align: center">
        <el-image :src="imgRev" style="width:780px;"/>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="haibaoRev = false">取 消</el-button>
    <el-button type="primary" @click="uploadImg" v-loading.fullscreen.lock="fullscreenLoading">{{editType?'更新素材库':'上传至素材库'}}</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="anlibox"
      width="700px">
      <div class="lable">
        网友名：
        <el-input
          placeholder="例如成都网友"
          v-model="anliForm.username"
          style="margin:5px 0;"
          >
        </el-input>
        网友标题：
        <el-input
          placeholder=""
          type="textarea"
          v-model="anliForm.usertitle"
          style="margin:5px 0;"
        >
        </el-input>
      </div>

      <div class="lable" style="border-top:1px solid #ddd;padding:10px 0;margin-top:10px;">
        回复机构名：
        <el-input
          placeholder="例如成都市网信办"
          v-model="anliForm.jgname"
          style="margin:5px 0;"
        >
        </el-input>
        回复机构内容：
        <el-input
          placeholder=""
          type="textarea"
          v-model="anliForm.jgreply"
          style="margin:5px 0;"
        >
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer" v-if="editAnlibtn==false">
        <el-button @click="anlibox = false">取 消</el-button>
        <el-button type="primary" @click="newAnli">确 定</el-button>
      </span>
      <span slot="footer" v-else>
        <el-button type="primary" @click="anlibox = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="新增感谢"
      :visible.sync="ganxiebox"
      width="700px">
      <div class="lable">
        感谢对象：
        <el-input
          placeholder="例如成都网友"
          v-model="ganxieForm.username"
          style="margin:5px 0;"
        >
        </el-input>
        感谢内容：
        <el-input
          placeholder=""
          type="textarea"
          v-model="ganxieForm.content"
          style="margin:5px 0;"
        >
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer" v-if="editGanxiebtn==false">
        <el-button @click="ganxiebox = false">取 消</el-button>
        <el-button type="primary" @click="newGanxie">确 定</el-button>
      </span>
      <span slot="footer" v-else>
        <el-button type="primary" @click="ganxiebox = false">确 定</el-button>
      </span>
    </el-dialog>
    <div class="imgs"></div>
    <div class="boxmain">
      <div class="forms" style="position: relative;overflow: auto;height:calc(100vh - 130px)">
        <el-tabs v-model="activeName" type="border-card">
          <el-tab-pane label="基本设置" name="base">
            <div class="formslabel">
              <div class="el-input-group__prepend" style="width: 70px;font-size: 14px;line-height: 38px;">标题</div>
              <el-date-picker
                v-model="base.time"
                type="month"
                format="yyyy 年 MM 月 dd 日"
                placeholder="选择月"
              >
              </el-date-picker>
            </div>
            <div class="formslabel">
              <el-input placeholder="请输入月报标题，默认为时间" v-model="base.title" style="width:400px">
                <template slot="prepend">标题</template>
              </el-input>
            </div>
            <div class="formslabel" v-if="base.title">
               <div style="width: 580px;" class="bannerBox" id="banner">
                 <img src="../../assets/image/20250218165646.jpg" style="width:580px">
                 <div v-if="base.title" :class="['m',dc(base.title,3)==10?'letter10':'',dc(base.title,3)==11?'letter11':'',dc(base.title,3)==12?'letter12':'']">{{ dc(base.title, 3) }}</div>
                 <div v-if="base.title" class="y">{{ dc(base.title, 4) }}</div>
               </div>

            </div>
            <div class="formslabel" v-if="base.title">
              <el-button style="margin-top: 20px;" type="primary" @click="saveBanner">Banner上传资料库</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane v-if="!editType || editType=='liuyan'" label="留言" name="liuyan">
            <el-empty description="请先设置基本设置" v-if="!base.title"></el-empty>
            <div v-if="base.title">
              <div v-if="activeData.liuyan.length<=0 && !editType" @click="getliuyan()"
                   style="background-color:#4b74f5;color:#fff;padding:15px 10px;text-align: center;width:190px;cursor: pointer"
              >获取{{ base.title }}数据
              </div>
              <div v-if="img1Data.shoujian" style="margin-top:20px;">
                <div style="display: flex;justify-content: space-between">
                  <el-input placeholder="收件量" v-model="img1Data.shoujian" style="width: 240px;">
                    <template slot="prepend">收件量</template>
                  </el-input>
                  <el-input placeholder="办结量" v-model="img1Data.banjieAll" style="width: 240px;">
                    <template slot="prepend">办结量</template>
                  </el-input>
                  <el-input placeholder="按时办结量" v-model="img1Data.anshibanjie" style="width: 240px;">
                    <template slot="prepend">按时办结量</template>
                  </el-input>
                </div>
                <div style="display: flex;justify-content: space-between;margin-top:20px;">
                  <el-input placeholder="按时办结率" v-model="img1Data.anshibanjielv" style="width: 240px;">
                    <template slot="prepend">按时办结率</template>
                  </el-input>
                  <el-input placeholder="满意率" v-model="img1Data.manyidu" style="width: 240px;">
                    <template slot="prepend">满意率</template>
                  </el-input>
                </div>
                <div style="margin-top:20px;">
                  <div style="margin-bottom:10px;font-size:18px;color:#4b74f5">注:</div>
                  <el-input placeholder="注" v-model="img1Data.tips" type="textarea" :rows="2">
                    <template slot="prepend">注</template>
                  </el-input>
                </div>

                <el-button style="margin-top: 40px;" type="primary" @click="refimg1">重新生成</el-button>
              </div>
            </div>

          </el-tab-pane>
          <el-tab-pane v-if="!editType || editType=='lingyu'" label="领域" name="lingyu">
            <el-empty description="请先设置基本设置" v-if="!base.title"></el-empty>
            <div v-if="base.title">
              <div v-if="activeData.lingyu.length<=0 && !editType" @click="getlingyu()"
                   style="background-color:#4b74f5;color:#fff;padding:15px 10px;text-align: center;width:220px;cursor: pointer"
              >获取{{ base.title }}领域数据
              </div>
              <div v-if="lingyuData.length>0" style="margin-top:20px;">
                <div v-for="(item,idx) in lingyuData" style="margin: 10px 0;">
                  <el-input :placeholder="item.name" v-model="lingyuData[idx].name"
                            style="width:180px;margin-right:5px;"
                  >
                  </el-input>
                  <el-input :placeholder="item.value" v-model="lingyuData[idx].value" style="width:80px;">
                  </el-input>
                  %
                </div>
                <el-button style="margin-top: 40px;" type="primary" @click="refimg2">重新生成</el-button>
              </div>
            </div>


          </el-tab-pane>
          <el-tab-pane v-if="!editType || editType=='lingyu2'" label="领域详情" name="lingyu2">
            <el-empty description="请先设置基本设置" v-if="!base.title"></el-empty>
            <div v-if="base.title">
              <div v-if="activeData.lingyu2.length<=0 && !editType" @click="getlingyu2()"
                   style="background-color:#4b74f5;color:#fff;padding:15px 10px;text-align: center;width:260px;cursor: pointer"
              >获取{{ base.title }}领域详情数据
              </div>
              <div v-if="lingyu2Data.length>0" style="margin-top:20px;">
                <draggable v-model="lingyu2Data" ghost-class="ghost"
                           chosen-class="chosenClass" animation="300"
                >
                  <div v-for="(item,idx) in lingyu2Data" style="margin: 10px 0;">
                    <el-input :placeholder="item.name" v-model="lingyu2Data[idx].name"  style="width:180px;margin-right:5px;" >
                    </el-input>
                    <el-input :placeholder="item.fupcount" v-model="lingyu2Data[idx].fupcount"  style="width:80px;margin-right:5px;" >
                    </el-input>
                    <div style="margin-left: 50px">
                        <div  style="margin: 10px 0;display: flex;background: #f6f6f6;padding:10px;">
                           <el-input :placeholder="item2.name"  v-for="(item2,idx2) in lingyu2Data[idx].data" v-model="lingyu2Data[idx].data[idx2].name" style="width:150px;margin-right:5px;" > </el-input>
                        </div>
                    </div>
                  </div>
                </draggable>
              </div>
            </div>


          </el-tab-pane>
          <el-tab-pane v-if="!editType || editType=='guanjianci'" label="关键词" name="guanjianci">

            <el-empty description="请先设置基本设置" v-if="!base.title"></el-empty>
            <div v-if="base.title">
              <div v-if="activeData.guanjianci.length<=0  && !editType" @click="getguanjianci()"
                   style="background-color:#4b74f5;color:#fff;padding:15px 10px;text-align: center;width:220px;cursor: pointer"
              >获取{{ base.title }}关键词数据
              </div>
              <div v-if="GuanjcData.length>0" style="margin-top:20px;">
                <div v-for="(item,idx) in GuanjcData" style="margin: 10px 0;">
                  <el-input :placeholder="item.name" v-model="GuanjcData[idx].name"
                            style="width:180px;margin-right:5px;"
                  >
                  </el-input>
                  <el-input :placeholder="item.count" v-model="GuanjcData[idx].count" style="width:80px;">
                  </el-input>
                  <i :class="[checkGJCstar!=idx?'el-icon-star-off':'el-icon-star-on']"
                     style="font-size:20px;margin-left:10px;cursor: pointer" @click="checkGJC(idx)"
                  ></i>
                </div>
                <el-input placeholder="提示，涉及相关" v-model="guanjianciTips">
                </el-input>
                <el-button style="margin-top: 40px;" type="primary" @click="refimg3">重新生成</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane v-if="!editType || editType=='shengzhi'" label="省直" name="shengzhi">
            <el-empty description="请先设置基本设置" v-if="!base.title"></el-empty>
            <div v-if="base.title">

              <div>
              <el-upload
                class="upload-demo"
                :action="uploadUrl"
                multiple

                style="marign:10px 0;"
                accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                :on-success="excelSucess"
                :on-progress="uploadLoading()"
                v-if="!editType"
                >
                <el-button size="small" type="primary">上传excel</el-button>
                <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
              </el-upload>
              </div>

              <el-tabs v-model="activeName2">
                <el-tab-pane label="排行榜数据" name="phb" >
                  <div v-if="shengzhiData.length>0" style="margin-top:20px;height:600px;overflow-y: scroll">
                    <div style="display: flex;text-align: center">
                      <div style="width:180px;margin-right:5px;">名称</div>
                      <div style="width:85px;">收到</div>
                      <div style="width:85px;">办结</div>
                      <div style="width:120px;padding:0 20px;margin:0 5px"  @dblclick="zbaction('sheng',1)">收到占比</div>
                      <div style="width:120px;padding:0 20px;margin:0 5px"  @dblclick="zbaction('sheng',2)">办结占比</div>
                      <div style="width:85px;">按时办结率</div>
                      <div style="width:85px;"></div>
                    </div>
                    <draggable v-model="shengzhiData"  ghost-class="ghost"
                               chosen-class="chosenClass" animation="300" >
                      <div v-for="(item,idx) in shengzhiData" style="margin: 10px 0;display: flex">

                        <el-input :placeholder="item.name" v-model="shengzhiData[idx].name"
                                  style="width:180px;margin-right:5px;"
                        >
                        </el-input>
                        <el-input :placeholder="item.shoudao" v-model="shengzhiData[idx].shoudao" style="width:80px;margin-right:5px;">
                        </el-input>
                        <el-input :placeholder="item.banjie" v-model="shengzhiData[idx].banjie" style="width:80px;margin-right:5px;">
                        </el-input>
                        <div style="width:120px;padding:0 20px;margin:0 5px">
                          <el-slider v-model="shengzhiData[idx].sdzb"  v-if="setting.sheng1==0"></el-slider>
                          <el-input :placeholder="shengzhiData[idx].sdzb" v-model="shengzhiData[idx].sdzb" v-else>
                          </el-input>
                        </div>
                        <div style="width:120px;padding:0 20px;margin:0 5px" >
                          <el-slider v-model="shengzhiData[idx].bjzb"  v-if="setting.sheng2==0"></el-slider>
                          <el-input :placeholder="shengzhiData[idx].bjzb" v-model="shengzhiData[idx].bjzb" v-else>
                          </el-input>
                        </div>
                        <el-input :placeholder="item.banjielv" v-model="shengzhiData[idx].banjielv" style="width:80px;">
                        </el-input>
                        <el-button  size="mini" type="success" @click="delShengzhi(idx)" style="margin-left: 10px">删除</el-button>
                      </div>
                    </draggable>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="满意度数据" name="myd">
                  <draggable v-model="shengzhiMY" style="height:550px;overflow-y: scroll"  ghost-class="ghost"
                             chosen-class="chosenClass" animation="300" >
                    <div v-for="(item, index) in shengzhiMY">
                      <el-input  v-model="shengzhiMY[index].name" style="margin-top:10px;width:500px;">  </el-input>
                      <el-button  size="mini" type="success" @click="delshengzhiMY(index)"  style="margin-left:20px;height:35px">删除</el-button>
                    </div>
                  </draggable>
                </el-tab-pane>
              </el-tabs>
            </div>

          </el-tab-pane>
          <el-tab-pane v-if="!editType || editType=='shizhou'" label="市州" name="shizhou">

            <el-empty description="请先设置基本设置" v-if="!base.title"></el-empty>
            <div v-if="base.title">
              <div v-if="!editType"
                   style="color:#666"
              >请在省直处上传EXCEL
              </div>
              <el-tabs v-model="activeName3">
                <el-tab-pane label="排行榜数据" name="phb" >
                  <div v-if="shizhouData.length>0" style="margin-top:20px;height:550px;overflow-y: scroll">
                    <div style="display: flex;text-align: center">
                      <div style="width:100px;margin-right:5px;">名称</div>
                      <div style="width:85px;">收到</div>
                      <div style="width:85px;">办结</div>
                      <div style="width:120px;padding:0 10px;margin:0 5px" @dblclick="zbaction('shi',1)">收到占比</div>
                      <div style="width:120px;padding:0 10px;margin:0 5px" @dblclick="zbaction('shi',2)">办结占比</div>
                      <div style="width:85px;">按时办结率</div>
                      <div style="width:85px;"></div>
                    </div>
                    <draggable v-model="shizhouData" ghost-class="ghost"
                               chosen-class="chosenClass" animation="300"
                    >
                      <div v-for="(item,idx) in shizhouData" style="margin: 10px 0;display:flex;">
                        <el-input :placeholder="item.name" v-model="shizhouData[idx].name"
                                  style="width:100px;margin-right:5px;"
                        >
                        </el-input>
                        <el-input :placeholder="item.shoudao" v-model="shizhouData[idx].shoudao"
                                  style="width:80px;margin-right:5px;"
                        >
                        </el-input>
                        <el-input :placeholder="item.banjie" v-model="shizhouData[idx].banjie"
                                  style="width:80px;margin-right:5px;"
                        >
                        </el-input>
                        <div style="width:120px;padding:0 20px;margin:0 5px">
                          <el-slider v-model="shizhouData[idx].sdzb"  v-if="setting.shi1==0"></el-slider>
                          <el-input :placeholder="shizhouData[idx].sdzb" v-model="shizhouData[idx].sdzb" v-else></el-input>
                        </div>
                        <div style="width:120px;padding:0 20px;margin:0 5px">
                          <el-slider v-model="shizhouData[idx].bjzb"  v-if="setting.shi2==0"></el-slider>
                          <el-input :placeholder="shizhouData[idx].bjzb" v-model="shizhouData[idx].bjzb" v-else></el-input>
                        </div>
                        <el-input :placeholder="item.banjielv" v-model="shizhouData[idx].banjielv" style="width:80px;">
                        </el-input>
                        <el-button size="mini" type="success" @click="delshizhouData(idx)" style="margin-left:20px">删除</el-button>
                      </div>
                    </draggable>
              </div>
                </el-tab-pane>
                <el-tab-pane label="满意度数据" name="myd">
                  <draggable v-model="shizhouDataMY" style="height:550px;overflow-y: scroll" ghost-class="ghost"
                             chosen-class="chosenClass" animation="300" >
                    <div style="display: flex;flex-wrap: wrap;align-items: center" v-for="(item, index) in shizhouDataMY">
                    <el-input v-model="shizhouDataMY[index].name" style="padding:5px 0;width:300px;"></el-input>
                    <el-input  v-model="shizhouDataMY[index].myd" style="padding:5px 0;width:100px;margin-left: 10px"> </el-input>
                      <el-button  size="mini" type="success" @click="delshizhouDataMY(index)" style="margin-left:20px;height:35px">删除</el-button>
                    </div>
                  </draggable>
                </el-tab-pane>
              </el-tabs>
            </div>


          </el-tab-pane>
          <el-tab-pane v-if="!editType || editType=='xianshi'" label="县市区" name="xianshi">


            <el-empty description="请先设置基本设置" v-if="!base.title"></el-empty>
            <div v-if="base.title">
              <div @click="getxianshi()"
                   v-if="!editType"
                   style="background-color:#4b74f5;color:#fff;padding:15px 10px;text-align: center;width:250px;cursor: pointer"
              >获取{{ base.title }}县市节点数据
              </div>


              <el-tabs v-model="activeName4">
                <el-tab-pane label="按时办结率" name="anshi" >
                  <draggable v-model="xianshiData.banjielv" style="height:550px;overflow-y: scroll"  ghost-class="ghost"
                             chosen-class="chosenClass" animation="300" >
                    <el-input v-for="(item, index) in xianshiData.banjielv" v-model="xianshiData.banjielv[index].name" style="margin-top:10px;width:500px;">  </el-input>
                  </draggable>
                </el-tab-pane>
                <el-tab-pane label="满意率" name="my" >
                  <draggable v-model="xianshiData.manyilv" style="height:550px;overflow-y: scroll"  ghost-class="ghost"
                             chosen-class="chosenClass" animation="300" >
                    <el-input v-for="(item, index) in xianshiData.manyilv" v-model="xianshiData.manyilv[index].name" style="margin-top:10px;width:500px;">  </el-input>
                  </draggable>
                </el-tab-pane>
                <el-tab-pane label="办理速度" name="sd" >
                  <draggable v-model="xianshiData.blsd" style="height:550px;overflow-y: scroll"  ghost-class="ghost"
                             chosen-class="chosenClass" animation="300" >
                    <el-input v-for="(item, index) in xianshiData.blsd"  v-model="xianshiData.blsd[index].name" style="margin-top:10px;width:500px;">  </el-input>
                  </draggable>
                </el-tab-pane>
              </el-tabs>

            </div>


          </el-tab-pane>
          <el-tab-pane v-if="!editType || editType=='anli'" label="案例" name="anli">
            <el-empty description="请先设置基本设置" v-if="!base.title"></el-empty>
            <div v-if="base.title" id="anli">
              <div @click="createAnli()"

                   style="background-color:#4b74f5;color:#fff;padding:15px 10px;text-align: center;width:250px;cursor: pointer"
              >新增案例
              </div>
                <el-table
                  ref="anlitable"
                  row-key="id"
                  :key="activeName"
                  :data="anliData"
                  style="width: 100%">
                  <el-table-column
                    prop="username"
                    label="网友姓名"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="usertitle"
                    label="网名提问"
                    width="220">
                  </el-table-column>
                  <el-table-column
                    prop="jgname"
                    label="机构名"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="jgreply"
                    label="机构回复"
                    width="220">
                  </el-table-column>
                  <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        @click="editAnli(scope.$index, scope.row)">编辑</el-button>
                      <el-button
                        size="mini"
                        type="danger"
                        @click="delAnli(scope.$index, scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane v-if="!editType || editType=='ganxie'"  label="感谢" name="ganxie">
            <el-empty description="请先设置基本设置" v-if="!base.title"></el-empty>
            <div v-if="base.title">
              <div @click="creatGanxie()"

                   style="background-color:#4b74f5;color:#fff;padding:15px 10px;text-align: center;width:250px;cursor: pointer"
              >新增感谢
              </div>
              <div  id="ganxie">
                <el-table
                  row-key="id"
                  :key="activeName"
                  :data="ganxieData"
                  style="width: 100%">
                  <el-table-column
                    prop="username"
                    label="感谢对象"
                    width="200">
                  </el-table-column>
                  <el-table-column
                    prop="content"
                    label="感谢内容"
                    width="400">
                  </el-table-column>

                  <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        @click="editGanxie(scope.$index, scope.row)">编辑</el-button>
                      <el-button
                        size="mini"
                        type="danger"
                        @click="delGanxie(scope.$index, scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>

          </el-tab-pane>
        </el-tabs>

      </div>
      <div class="bar">

        <div v-if="step==1">
          <el-empty description="无可见所得" v-if="status.nobase"></el-empty>

          <el-card class="box-card" v-else>
            <div slot="header" class="clearfix">
              <span>预览海报</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="saveBaseImage">预览</el-button>
            </div>
            <div class="baseImge1" style="position: relative" id="baseImge1">
              <el-image
                style="height:600px;position: relative;"
                :src="base1img"
                :fit="fit"
              >
              </el-image>
              <div class="image-date">
                {{ base.title }}
              </div>
            </div>
          </el-card>
        </div>
        <div v-else-if="step==2" v-loading="loading.step2">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>预览海报</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="saveBaseImage2">预览</el-button>
            </div>

            <el-empty :image-size="200" description="请在左侧设置数据" v-if="!status.liuyan"></el-empty>
            <div class="" style="position: relative;transform-origin: 0 0;width:780px" v-if="status.liuyan" id="img2">
              <div class="part-one">
                <div class="head">
                  <div class="topZi">
                    <div class="date font1">{{ dc(base.title, 1) }}</div>
                    <div class="title font1">四川省网上群众工作平台月报</div>
                    <div class="department">川网传媒·麻辣社区 | 群众呼声 - 四川省网上群众工作平台</div>
                  </div>
                </div>
                <div class="mybody">
                  <div class="top-img-box">
                    <img src="../../assets/image/mybody-top.png">
                  </div>
                  <div class="main">
                    <div class="title font1">
                      群众呼声
                      <span class="desc">· {{ dc(base.title, 2) }}网民留言数据</span>
                    </div>

                    <div class="echarts-box" id="tubiao1"></div>
                    <div class="shuju font1">
                      按时办结率
                      <span class="desc font2" style="color:rgb(75 117 246)">{{ img1Data.anshibanjielv }}%</span>
                      ，满意率
                      <span class="desc font2" style="color:rgb(75 117 246)">{{ img1Data.manyidu }}%</span>
                    </div>
                    <div class="zhuyi-wrap font2">
                      <div class="desc">*注：</div>
                      <div class="zhuyi">{{ img1Data.tips }}</div>
                    </div>
                  </div>
                </div>
                <div class="footer">
                  <div class="background-img-box">
                    <img src="../../assets/image/footer-background.png" alt="麻辣社区">
                  </div>
                  <div class="logo-box">
                    <img src="../../assets/image/footer-LOGO.png" alt="麻辣社区">
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
        <div v-else-if="step==3" v-loading="loading.step3">
          <el-card class="box-card"  style="height: 700px;overflow: hidden">
            <div slot="header" class="clearfix">
              <span>预览海报</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="saveBaseImage3">预览</el-button>
            </div>
            <el-empty :image-size="200" description="请在左侧设置数据" v-if="!status.lingyu"></el-empty>
            <div style="position: relative;transform-origin: 0 0;width:780px;height:650px;overflow-y: scroll" v-if="status.lingyu" >
              <Lingyu :lingyuData="lingyuData" ref="lingyuref" :time="dc(base.title,1)" id="1"></Lingyu>
            </div>
            <div style="position: relative;transform-origin: 0 0;width:780px;z-index: -100" v-if="status.lingyu" id="img3">
              <Lingyu :lingyuData="lingyuData" ref="lingyuref2" :time="dc(base.title,1)" id="2"></Lingyu>
            </div>
          </el-card>
        </div>
        <div v-else-if="step==4" v-loading="loading.step4">
          <el-card class="box-card" style="height: 700px;overflow: hidden">
            <div slot="header" class="clearfix">
              <span>预览海报</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="saveBaseImage4">预览</el-button>
            </div>
            <el-empty :image-size="200" description="请在左侧设置数据" v-if="!status.guanjianci"></el-empty>
            <div class="" style="position: relative;transform-origin: 0 0;width:780px;overflow-y: scroll;height:650px" v-if="status.guanjianci"

            >
              <Guanjianci ref="GuanjianciRef" :GuanjianciData="GuanjcData" :checkIDX="checkGJCstar"
                          :time="dc(base.title,1)"
                          id="1"
                          :time2="dc(base.title,2)" :guanjianciTips="guanjianciTips"
              ></Guanjianci>
            </div>

            <div class="" style="position: relative;transform-origin: 0 0;width:780px;z-index: -100" v-if="status.guanjianci"
                 id="img4"
            >
              <Guanjianci ref="GuanjianciRef2" :GuanjianciData="GuanjcData" :checkIDX="checkGJCstar"
                          :time="dc(base.title,1)"
                          id="2"
                          :time2="dc(base.title,2)" :guanjianciTips="guanjianciTips"
              ></Guanjianci>
            </div>
          </el-card>
        </div>
        <div v-else-if="step==5" v-loading="loading.step5">
          <el-card class="box-card" style="height: 700px;overflow: hidden">
            <div slot="header" class="clearfix">
              <span>预览海报</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="saveBaseImage5">预览</el-button>
            </div>
            <el-empty :image-size="200" description="请在左侧设置数据" v-if="!status.shengzhi"></el-empty>
            <div style="position: relative;transform-origin: 0 0;width:780px;height:650px;overflow-y: scroll"" v-if="status.shengzhi"
            >
              <Shengzhi :shengzhidata="shengzhiData" :shengzhiMY="shengzhiMY" :time="dc(base.title,1)"></Shengzhi>
            </div>
            <div style="position: relative;transform-origin: 0 0;width:780px;position: relative;z-index: -100" v-if="status.shengzhi" id="img5"
            >
              <Shengzhi :shengzhidata="shengzhiData" :shengzhiMY="shengzhiMY" :time="dc(base.title,1)"></Shengzhi>
            </div>
          </el-card>
        </div>
        <div v-else-if="step==6" v-loading="loading.step6" style="height: 700px;overflow: hidden">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>预览海报</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="saveBaseImage6">预览</el-button>
            </div>
            <el-empty :image-size="200" description="请在左侧设置数据" v-if="!status.shizhou"></el-empty>
            <div style="position: relative;transform-origin: 0 0;width:780px;height:650px;overflow-y: scroll" v-if="status.shizhou"
            >
              <Shizhou :Shizhoudata="shizhouData" :shizhouDataMY="shizhouDataMY" :time="dc(base.title,1)"></Shizhou>
            </div>
            <div style="position: relative;transform-origin: 0 0;width:780px;position: relative;z-index: 100" v-if="status.shizhou" id="img6"
            >
              <Shizhou :Shizhoudata="shizhouData" :shizhouDataMY="shizhouDataMY" :time="dc(base.title,1)"></Shizhou>
            </div>
          </el-card>
        </div>

        <div v-else-if="step==7" v-loading="loading.step7">
          <el-card class="box-card" style="height: 700px;overflow: hidden">
            <div slot="header" class="clearfix">
              <span>预览海报</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="saveBaseImage7">预览</el-button>
            </div>
            <el-empty :image-size="200" description="请在左侧设置数据" v-if="!status.xianshi"></el-empty>
            <div style="position: relative;transform-origin: 0 0;width:780px;overflow-y: scroll;height:650px;" v-if="status.xianshi"
            >
              <Xianshi :xianshiData="xianshiData"  :time="dc(base.title,1)"></Xianshi>
            </div>
            <div style="position: relative;transform-origin: 0 0;width:780px;position: relative;z-index:-100" v-if="status.xianshi" id="img7"
            >
              <Xianshi :xianshiData="xianshiData"  :time="dc(base.title,1)"></Xianshi>
            </div>
          </el-card>
        </div>

        <div v-else-if="step==8">
          <el-card class="box-card" style="height: 700px;overflow: hidden">
            <div slot="header" class="clearfix">
              <span>预览海报</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="saveBaseImage8">预览</el-button>
            </div>
            <div style="position: relative;transform-origin: 0 0;width:780px;overflow-y: scroll;height:650px;">
              <Anli :anliData="anliData"  :time="dc(base.title,1)" :time2="dc(base.title,2)"></Anli>
            </div>
            <div style="position: relative;transform-origin: 0 0;width:780px;position: relative;z-index:-100" id="img8">
              <Anli :anliData="anliData"  :time="dc(base.title,1)" :time2="dc(base.title,2)"></Anli>
            </div>
          </el-card>
        </div>

        <div v-else-if="step==9">
          <el-card class="box-card" style="height: 700px;overflow: hidden">
            <div slot="header" class="clearfix">
              <span>预览海报</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="saveBaseImage9">预览</el-button>
            </div>
            <div style="position: relative;transform-origin: 0 0;width:780px;overflow-y: scroll;height:650px;">
              <Ganxie :ganxieData="ganxieData"  :time="dc(base.title,1)" :time2="dc(base.title,2)"></Ganxie>
            </div>
            <div style="position: relative;transform-origin: 0 0;width:780px;position: relative;z-index:-100" id="img9">
              <Ganxie :ganxieData="ganxieData"  :time="dc(base.title,1)" :time2="dc(base.title,2)"></Ganxie>
            </div>
          </el-card>
        </div>

      <div v-else-if="step==10">
        <el-card class="box-card" style="height: 700px;overflow: hidden">
          <div slot="header" class="clearfix">
            <span>预览海报</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="saveBaseImage10">预览</el-button>
          </div>
          <div style="position: relative;transform-origin: 0 0;width:780px;overflow-y: scroll;height:650px;">
            <Lingyuxq :lingyu2Data="lingyu2Data"  :time="dc(base.title,1)" :time2="dc(base.title,2)"></Lingyuxq>
          </div>
          <div style="position: relative;transform-origin: 0 0;width:780px;position: relative;z-index:-100" id="img10">
            <Lingyuxq :lingyu2Data="lingyu2Data"  :time="dc(base.title,1)" :time2="dc(base.title,2)"></Lingyuxq>
          </div>
        </el-card>
      </div>
      </div>
    </div>
  </div>
</template>

<script>

import base1img from '@/assets/images/20250214160540.jpg'
import html2canvas from 'html2canvas'
import * as echarts from 'echarts'
import {
  getBaseData,
  getGuanjianci,
  getHb,
  getLingyu,
  getShengzhi,
  getShizhou,
  getXianshi,
  uploadHb
} from '@/api/count'
import Lingyu from '@/components/Charts/Lingyu'
import Lingyuxq from '@/components/Charts/Lingyuxq'
import Guanjianci from '@/components/Charts/Guanjianci'
import Shengzhi from '@/components/Charts/Shengzhi'
import Shizhou from '@/components/Charts/Shizhou'
import Xianshi from '@/components/Charts/Xianshi'
import Anli from '@/components/Charts/Anli'
import Ganxie from '@/components/Charts/Ganxie'
import Sucai from '@/components/Sucai'
import draggable from 'vuedraggable'
import Sortable from 'sortablejs'
import Cookies from 'js-cookie'

export default {
  components: {
    Sucai,
    Lingyu,
    Lingyuxq,
    Guanjianci,
    Shengzhi,
    Shizhou,
    Xianshi,
    Anli,
    Ganxie,
    draggable
  },
  data() {
    return {
      tab: '1',
      uploading:false,
      editloading:false,
      activeName2:'phb',
      setting:{
        sheng1:0,
        sheng2:0,
        shi1:0,
        shi2:0
      },
      activeName3:'phb',
      activeName4:'anshi',
      fullscreenLoading: false,
      haibaoRev: false,
      activeName: 'base',
      anlibox:false,
      ganxiebox:false,
      uploadUrl:'https://wz.mala.cn/superAdmin.Count/uploadXls?token='+encodeURIComponent(Cookies.get('vue_admin_template_token')),
      activeData: {
        liuyan: [],
        lingyu: [],
        guanjianci: [],
        lingyu2:[],
      },
      guanjianciTips: '相关求助和投诉信息增多，涉及成都、广安、巴中、凉山、攀枝花等多个市（州）。',
      chart1: null,
      base: {},
      fit: 'fill',
      step: 0,
      imgRev: '',
      uploadshengzhi:false,
      checkGJCstar: '0',
      imgRev2: '',
      imgtitle: '',
      imgType:'',
      saveData:[],
      base1img: base1img,
      status: {
        nobase: true,
        liuyan: false,
        lingyu: false,
        guanjianci: false,
        shengzhi: false,
        shizhou:false,
        xianshi:false,
        anli:false,
        ganxie:false
      },
      othertabs:{
        shengzhi:'data'
      },
      otherData:{
        shengzhidata:'',
      },
      imgs: [],
      logicImageList: '',
      bigImageUrl: '',
      img1Data: { anshibanjielv: '', manyidu: '' },
      lingyuData: [],
      lingyu2Data:[],
      GuanjcData: [],
      shengzhiData: [],
      shengzhiMY: [],
      shizhouData:[],
      shizhouDataMY:[],
      xianshiData:[],
      anliData:[],
      ganxieData:[],
      editType:'',
      editAnlibtn:false,
      editGanxiebtn:false,
      ganxieForm:{
        username:'',
        content:'',
      },
      anliForm:{
        id:'',
        username:'',
        usertitle:'',
        jgname:'',
        jgreply:''
      },
      useImgdraw: false,
      sucai: {
        title: '',
        title2: ''
      },
      scimgBox: false,
      loading: {
        step2: false,
        step3: false,
        step4: false,
        step5: false,
        step6: false,
        step7:false,
        step8:false,
        step9:false,
        step10:true
      }
    }
  },
  watch: {
    'base.time': function(val) {
      this.$set(this.base, 'title', val.getFullYear() + '年' + (val.getMonth() + 1) + '月')
      this.$set(this.status, 'nobase', false)
      this.step = 1
    },
    '$route'(to, from) {
      let id = to.query.id;
      this.getEdit(id)
    },
    activeName: function(val) {
      if (val == 'liuyan') {
        this.step = 2
      } else if (val == 'base') {
        this.step = 1
      } else if (val == 'lingyu') {
        this.step = 3
      } else if (val == 'guanjianci') {
        this.step = 4
      } else if (val == 'shengzhi') {
        this.step = 5
      } else if (val == 'shizhou') {
        this.step = 6
      }else if (val == 'xianshi') {
        this.step = 7
      }else if (val == 'anli') {
        this.step = 8
        this.$nextTick(() => {
          // 行拖拽
          this.rowDrop()
        })
      }else if (val == 'ganxie') {
        this.step = 9
        this.$nextTick(() => {
          // 行拖拽
          this.rowDrop2()
        })
      }else if (val == 'lingyu2') {
        this.step = 10
      }
    }
  },
  created() {
    let id = this.$route.query.id
    if (id) {
      //开启编辑模式，获取数据
      this.getEdit(id)
    }
  },
  methods: {
    uploadLoading(){
      this.uploading = true
    },
    excelSucess(r){
      this.shizhouData = r.data.shizhouData
      this.shizhouDataMY = r.data.shizhouDataMY
      this.shengzhiData = r.data.shengzhiData
      this.shengzhiMY = r.data.shengzhiMY
      this.$set(this.status, this.activeName, true)
      this.$set(this.status, 'shizhou', true)
      this.uploading = false
    },
    rowDrop() {
      const tbody = document.querySelector('#anli .el-table__body-wrapper tbody')
      const that = this
      Sortable.create(tbody, {
        onEnd(evt) {
          const currRow = that.anliData.splice(evt.oldIndex, 1)[0]
          that.anliData.splice(evt.newIndex, 0, currRow)
        },
      })
    },
    rowDrop2() {
      const tbody = document.querySelector('#ganxie .el-table__body-wrapper tbody')
      const that = this
      Sortable.create(tbody, {
        onEnd(evt) {
          const currRow = that.ganxieData.splice(evt.oldIndex, 1)[0]
          that.ganxieData.splice(evt.newIndex, 0, currRow)
        },
      })
    },
    getEdit(id) {
      if(!id){
        this.$router.go(0);
        return false
      }
      let _this = this
      this.editloading = true;
      getHb({id:id}).then(r=>{
        this.editloading = false;
         if(r.code==200){
           this.editType = r.data.imgType
           this.activeName = r.data.imgType
           this.base =  JSON.parse(r.data.base)
           switch (r.data.imgType)
           {
             case 'liuyan':
               this.img1Data = JSON.parse(r.data.jsonData)
               this.$set(this.loading, 'step2', true)
               this.$set(this.status, 'liuyan', true)
               this.$set(this.loading, 'step2', false)
               let AJAXDATA = ['收件量' + this.img1Data.shoujian, '办结量' + this.img1Data.banjieAll, '按时办结量' + this.img1Data.anshibanjie]
               //获取表格数据
               this.MakeImg1(AJAXDATA, this.img1Data)
               break
             case 'lingyu':
               this.lingyu2Data = JSON.parse(r.data.jsonData)
               this.$set(this.loading, 'step3', true)
               this.$set(this.status, 'lingyu', true)
               this.$nextTick(() => {
                 setTimeout(function() {
                   _this.$set(_this.loading, 'step3', false)
                   _this.$refs.lingyuref.cinit()
                   _this.$refs.lingyuref2.cinit()
                 }, 1000)
               })
               break;
             case 'lingyu2':
               this.lingyu2Data = JSON.parse(r.data.jsonData)
               this.$set(this.loading, 'step10', true)
               this.$set(this.status, 'lingyu2', true)
               this.$nextTick(() => {
                 _this.$set(_this.loading, 'step10', false)
               })
               break;
             case 'guanjianci':
               this.GuanjcData = JSON.parse(r.data.jsonData)
               this.$set(this.loading, 'step4', true)
               this.$set(this.status, 'guanjianci', true)
               _this.$nextTick(() => {
                 setTimeout(function() {
                   _this.$set(_this.loading, 'step4', false)
                   _this.$refs.GuanjianciRef.cinit()
                   _this.$refs.GuanjianciRef2.cinit()
                 }, 1000)
               })
               break;
             case 'shengzhi':
               this.shengzhiData = JSON.parse(r.data.jsonData).shengzhiData
               this.shengzhiMY = JSON.parse(r.data.jsonData).shengzhiMY
               this.$set(this.loading, 'step5', true)
               this.$set(this.status, 'shengzhi', true)
               this.$set(this.loading, 'step5', false)
               break
             case 'shizhou':
               this.shizhouData = JSON.parse(r.data.jsonData).shizhouData
               this.shizhouDataMY =JSON.parse( r.data.jsonData).shizhouDataMY
               this.$set(this.loading, 'step6', true)
               this.$set(this.status, 'shizhou', true)
               this.$set(this.loading, 'step6', false)
               break;
             case 'xianshi':
               this.xianshiData = JSON.parse(r.data.jsonData)
               this.$set(this.loading, 'step7', true)
               this.$set(this.status, 'xianshi', true)
               break;
             case 'anli':
               this.anliData = JSON.parse(r.data.jsonData)
               // this.$set(this.loading, 'step8', true)
               this.$nextTick(() => {
                 // 行拖拽
                 this.rowDrop()
               })
               break;
             case 'ganxie':
               this.ganxieData = JSON.parse(r.data.jsonData)
               this.$nextTick(() => {
                 // 行拖拽
                 this.rowDrop2()
               })
               break;
           }
         }
      })
    },
    zbaction(type,value){
      if(type=='sheng'){
        if(value==1){
          this.setting.sheng1 = this.setting.sheng1?0:1
        }else if(value==2){
          this.setting.sheng2 = this.setting.sheng2?0:1
        }
      }else if(type=='shi'){
        if(value==1){
          this.setting.shi1 = this.setting.shi1?0:1
        }else if(value==2){
          this.setting.shi2 = this.setting.shi2?0:1
        }
      }
    },
    delShengzhi(index){
      this.shengzhiData.splice(index,1)
    },
    delshengzhiMY(index){
      this.shengzhiMY.splice(index,1)
    },
    delshizhouData(index){
      this.shizhouData.splice(index,1)
    },
    delshizhouDataMY(index){
      this.shizhouDataMY.splice(index,1)
    },
    useImg() {
      this.$refs.sucai.openSc()
    },
    editAnli(index,data){
      console.log(this.anliData)
      this.anlibox = true
      this.editAnlibtn = true
      this.anliForm = data
    },
    delAnli(index,data){
      // this.anlibox = true
      this.anliData.splice(index,1)
    },

    editGanxie(index,data){
      this.ganxiebox = true
      this.editGanxiebtn = true
      this.ganxieForm = data
    },
    delGanxie(index,data){
      // this.anlibox = true
      this.ganxieData.splice(index,1)
    },
    createAnli(){
      this.editAnlibtn = false
      this.anlibox = true
      this.anliForm= {
        id:'',
        username:'',
        usertitle:'',
        jgname:'',
        jgreply:''
      }
    },
    creatGanxie(){
      this.editGanxiebtn = false
      this.ganxiebox = true
      this.ganxieForm= {
        username:'',
        content:''
      }
    },
    checkGJC(idx) {
      this.checkGJCstar = idx
    },
    fontSize(res) {
      let clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth
      if (!clientWidth) return
      let fontSize = clientWidth / 1600
      return res * fontSize
    },
    //获取领域
    async getlingyu() {
      let _this = this
      this.$set(this.loading, 'step3', true)
      getLingyu({ time: this.base.time }).then(response => {
        this.$set(this.status, 'lingyu', true)

        this.lingyuData = response.data
        _this.$nextTick(() => {
          setTimeout(function() {
            _this.$set(_this.loading, 'step3', false)
            _this.$refs.lingyuref.cinit()
            _this.$refs.lingyuref2.cinit()
          }, 1000)
        })

      })
    },
    //获取领域2
    async getlingyu2() {
      let _this = this
      this.$set(this.loading, 'step10', true)
      getLingyu({ time: this.base.time,type:2 }).then(response => {
        this.$set(this.status, 'lingyu2', true)
        this.lingyu2Data = response.data
        _this.$nextTick(() => {
          _this.$set(_this.loading, 'step10', false)
        })
      })
    },
    //获取领域
    async getxianshi() {
      let _this = this
      this.$set(this.loading, 'step7', true)
      getXianshi({ time: this.base.time }).then(response => {
        this.$set(this.status, 'xianshi', true)
        _this.$set(_this.loading, 'step7', false)
        this.xianshiData = response.data
      })
    },
    async getguanjianci() {
      let _this = this
      this.$set(this.loading, 'step4', true)
      getGuanjianci({ time: this.base.time }).then(response => {
        this.$set(this.status, 'guanjianci', true)
        //
        this.GuanjcData = response.data
        _this.$nextTick(() => {
          setTimeout(function() {
            _this.$set(_this.loading, 'step4', false)
            _this.$refs.GuanjianciRef.cinit()
            _this.$refs.GuanjianciRef2.cinit()
          }, 1000)
        })
      })
    },
    //获取留言
    async getliuyan() {
      let _this = this
      this.$set(this.loading, 'step2', true)
      getBaseData({ time: this.base.time }).then(response => {
        this.$set(this.status, 'liuyan', true)
        this.$set(this.loading, 'step2', false)
        this.img1Data = response.data
        let AJAXDATA = ['收件量' + response.data.shoujian, '办结量' + response.data.banjieAll, '按时办结量' + response.data.anshibanjie]
        //获取表格数据
        this.MakeImg1(AJAXDATA, response.data)
      })
    },
    //获取留言
    async getshengzhi() {
      let _this = this
      this.$set(this.loading, 'step5', true)
      getShengzhi({ time: this.base.time }).then(response => {
        this.$set(this.status, 'shengzhi', true)
        this.$set(this.loading, 'step5', false)
        this.shengzhiData = response.data
        this.shengzhiMY = response.manyi
      })
    },
    async getshizhou(){
      let _this = this
      this.$set(this.loading, 'step6', true)
      getShizhou({ time: this.base.time }).then(response => {
        this.$set(this.status, 'shizhou', true)
        this.$set(this.loading, 'step6', false)
        this.shizhouData= response.data
        this.shizhouDataMY = response.manyi
      })
    },
    newAnli(){
      this.anliForm.id = Date.now().toString(36)
      let newData = JSON.parse(JSON.stringify(this.anliData));
      newData.push(this.anliForm)
      this.anliData = newData;
      this.anliForm= {
          id:'',
          username:'',
          usertitle:'',
          jgname:'',
          jgreply:''
      }
      this.$nextTick(() => {
        // 行拖拽
        this.rowDrop()
      })
      this.anlibox = false
    },
    newGanxie(){
      this.ganxieForm.id = Date.now().toString(36)
      let newData = JSON.parse(JSON.stringify(this.ganxieData));
      newData.push(this.ganxieForm)
      this.ganxieData = newData;
      this.anliForm= {
        id:'',
        username:'',
        content:''
      }
      this.rowDrop2()
      this.ganxiebox = false
    },
    refimg3() {
      let _this = this
      _this.$nextTick(() => {
        setTimeout(function() {
          _this.$refs.GuanjianciRef.cinit()
          _this.$refs.GuanjianciRef2.cinit()
        }, 300)
      })
    },
    refimg2() {
      let _this = this
      _this.$nextTick(() => {
        setTimeout(function() {
          _this.$refs.lingyuref.cinit()
          _this.$refs.lingyuref2.cinit()
        }, 300)
      })
    },
    refimg1() {
      let AJAXDATA = ['收件量' + this.img1Data.shoujian, '办结量' + this.img1Data.banjieAll, '按时办结量' + this.img1Data.anshibanjie]
      //获取表格数据
      this.MakeImg1(AJAXDATA, this.img1Data)
    },
    MakeImg1(AJAXDATA, response) {
      let _this = this
      let options = {
        grid: {
          left: '-40px',
          right: '0',
          bottom: '0',
          containLabel: true // 确保标签不会被裁剪
        },
        xAxis: {
          boundaryGap: true,
          data: AJAXDATA,
          axisLabel: {
            margin: 15,
            textStyle: {
              // fontWeight: 'bold',
              fontSize: 24,
              color: '#000'
              // fontFamily: "SIYUAN"
            }
          },
          axisTick: {
            alignWithLabel: false,
            show: false
          },
          axisLine: {
            //坐标轴轴线相关设置
            lineStyle: {
              color: '#dddcde'
            }
          }
        },
        yAxis: {
          show: false
        },
        series: [
          {
            type: 'bar',
            data: [
              {
                value: response.shoujian,
                itemStyle: {
                  // color: '#62a0f7',
                  barBorderRadius: [20, 20, 0, 0],
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    {
                      offset: 0,
                      color: '#7bb8f9'
                    },
                    {
                      offset: 1,
                      color: '#4a88f5'
                    }
                  ])
                }
              },
              {
                value: response.banjieAll,
                itemStyle: {
                  barBorderRadius: [20, 20, 0, 0],
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    {
                      offset: 0,
                      color: '#84f0f0'
                    },
                    {
                      offset: 1,
                      color: '#5fcbcb'
                    }
                  ])
                }
              },
              {
                value: response.anshibanjie,
                itemStyle: {
                  barBorderRadius: [20, 20, 0, 0],
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    {
                      offset: 0,
                      color: '#f3ba8c'
                    },
                    {
                      offset: 1,
                      color: '#ed7538'
                    }
                  ])
                }
              }
            ]
          }
        ]
      }
      _this.$nextTick(() => {
        let chart = echarts.init(document.getElementById('tubiao1'), null, { devicePixelRatio: 2 })
        chart.setOption(options)
      })
    },
    dc(data, type) {
      if (type == 1) {
        return data.replace('年', '.').replace('月', '')
      } else if (type == 2) {
        return data.replace(/^\d{4}年/, '')
      } else if (type == 3) {
        return data.replace(/^\d{4}年/, '').replace('月', '')
      }else if (type == 4) {
        return data.replace(/(\d{2}年).*/, '$1');
      }
    },
    //保存头图
    async saveBaseImage() {
      this.imgtitle = this.base.title + '头图海报'
      this.imgType = 'base';
      let dom1 = document.getElementById('baseImge1')
      await html2canvas(dom1, {
        scale: 2,
        height: document.getElementById('baseImge1').scrollHeight,
        windowHeight: document.getElementById('baseImge1').scrollHeight
      }).then(canvas => {
        // 将canvas转换为图片URL
        const imgUrl = canvas.toDataURL('image/png')
        this.haibaoRev = true
        this.imgRev = imgUrl
      })

    },
    uploadImg() {
      let _this = this,ids=0;
      if(this.editType){
        ids = this.$route.query.id
      }
      uploadHb({ img: this.imgRev, imgText: this.imgtitle,JsonData:this.saveData,imgType:this.imgType,base:this.base,ids:ids}).then(res => {
        if (res.code == 200) {
          _this.haibaoRev = false
          this.$message({
            message: '素材上传成功',
            type: 'success'
          })
        }
      })
    },
    async saveBaseImage2() {
      this.imgType = 'liuyan';
      this.saveData = this.img1Data
      this.imgtitle = this.base.title + '留言数据柱状图'
      let dom1 = document.getElementById('img2')
      await html2canvas(dom1, {
        scale: window.devicePixelRatio * 2
      }).then(canvas => {
        // 将canvas转换为图片URL
        const imgUrl = canvas.toDataURL('image/png')
        this.haibaoRev = true
        this.imgRev = imgUrl
      })
    },
    async saveBaseImage3() {
      this.imgType = 'lingyu'
      this.saveData = this.lingyuData
      this.imgtitle = this.base.title + '领域饼图'
      let dom1 = document.getElementById('img3')
      await html2canvas(dom1, {
        scale: window.devicePixelRatio * 2
      }).then(canvas => {
        // 将canvas转换为图片URL
        const imgUrl = canvas.toDataURL('image/png')
        this.haibaoRev = true
        this.imgRev = imgUrl
      })
    },
    async saveBaseImage4() {
      this.imgType = 'guanjianci'
      this.saveData = this.GuanjcData;
      this.imgtitle = this.base.title + '关键词横向柱状图'
      let dom1 = document.getElementById('img4')
      await html2canvas(dom1, {
        scale: window.devicePixelRatio * 2
      }).then(canvas => {
        // 将canvas转换为图片URL
        const imgUrl = canvas.toDataURL('image/png')
        this.haibaoRev = true
        this.imgRev = imgUrl
      })
    },
    async saveBaseImage5() {
      this.imgType = 'shengzhi'
      let newData = {
        shengzhiData:this.shengzhiData,
        shengzhiMY:this.shengzhiMY
      }
      this.saveData = newData
      this.imgtitle = this.base.title + '省直办理质效'
      let dom1 = document.getElementById('img5')
      await html2canvas(dom1, {
        scale: window.devicePixelRatio * 2
      }).then(canvas => {
        // 将canvas转换为图片URL
        const imgUrl = canvas.toDataURL('image/png')
        this.haibaoRev = true
        this.imgRev = imgUrl
      })
    },
    async saveBaseImage6() {
      this.imgType = 'shizhou'
      let newData = {
        shizhouData:this.shizhouData,
        shizhouDataMY:this.shizhouDataMY
      }
      this.saveData = newData
      this.imgtitle = this.base.title + '市州办理质效'
      let dom1 = document.getElementById('img6')
      await html2canvas(dom1, {
        scale: window.devicePixelRatio * 2
      }).then(canvas => {
        // 将canvas转换为图片URL
        const imgUrl = canvas.toDataURL('image/png')
        this.haibaoRev = true
        this.imgRev = imgUrl
      })
    },
    async saveBaseImage7() {
      this.imgType = 'xianshi'
      this.saveData = this.xianshiData
      this.imgtitle = this.base.title + '县市区办理质效'
      let dom1 = document.getElementById('img7')
      await html2canvas(dom1, {
        scale: window.devicePixelRatio * 2
      }).then(canvas => {
        // 将canvas转换为图片URL
        const imgUrl = canvas.toDataURL('image/png')
        this.haibaoRev = true
        this.imgRev = imgUrl
      })
    },
    async saveBaseImage8() {
      this.imgType = 'anli'
      this.saveData = this.anliData
      this.imgtitle = this.base.title + '优秀案例'
      let dom1 = document.getElementById('img8')
      await html2canvas(dom1, {
        scale: window.devicePixelRatio * 2
      }).then(canvas => {
        // 将canvas转换为图片URL
        const imgUrl = canvas.toDataURL('image/png')
        this.haibaoRev = true
        this.imgRev = imgUrl
      })
    },
    async saveBaseImage9() {
      this.imgType = 'ganxie'
      this.saveData = this.ganxieData
      this.imgtitle = this.base.title + '感谢'
      let dom1 = document.getElementById('img9')
      await html2canvas(dom1, {
        scale: window.devicePixelRatio * 2
      }).then(canvas => {
        // 将canvas转换为图片URL
        const imgUrl = canvas.toDataURL('image/png')
        this.haibaoRev = true
        this.imgRev = imgUrl
      })
    },
    async saveBaseImage10() {
      this.imgType = 'lingyu2'
      this.saveData = this.lingyu2Data
      this.imgtitle = this.base.title + '领域留言详情'
      let dom1 = document.getElementById('img10')
      await html2canvas(dom1, {
        scale: window.devicePixelRatio * 2
      }).then(canvas => {
        // 将canvas转换为图片URL
        const imgUrl = canvas.toDataURL('image/png')
        this.haibaoRev = true
        this.imgRev = imgUrl
      })
    },
    async saveBanner(){
      let _this = this
      this.imgtitle = this.base.title + 'Banner'
      let dom1 = document.getElementById('banner')
      await html2canvas(dom1, {
        scale: window.devicePixelRatio * 2
      }).then(canvas => {
        // 将canvas转换为图片URL
        const imgUrl = canvas.toDataURL('image/png')
        // this.fullscreenLoading = true
        uploadHb({ img: imgUrl, imgText: this.imgtitle,type:1,imgType:this.imgType,base:this.base }).then(res => {
          if (res.code == 200) {
            this.$message({
              message: 'Banner上传成功',
              type: 'success'
            })
          }
        })
      })
    },
    async rimg() {
      let _this = this
      let dom1 = document.getElementById('img2')
      await html2canvas(dom1, {
        scale: 1.1
      }).then(canvas => {
        // 将canvas转换为图片URL
        const imgUrl = canvas.toDataURL('image/png')
        setTimeout(function() {
          _this.$nextTick(() => {
            _this.logicImageList = [imgUrl]
            _this.bigImageUrl = imgUrl
            _this.$refs.elImage.clickHandler()
          })
        }, 3000)
      })
    }
  }
}

</script>

<style lang="scss" scoped>

@import '../../assets/fonts.css';
@import '../../assets/yuebao/css.css';
@import '../../assets/yuebao/media.css';


.baseImge1 {
  .image-date {
    background: #fff;
    border-radius: 30px;
    padding: 20px;
    color: #1d66e0;
    top: 40%;
    left: 20px;
    position: absolute;
    font-size: 26px;
    font-weight: bolder;
  }

  #tubiao1 {
    height: 450px;
  }
}


.bannerBox{
  position: relative;
  height:207px;
  .m{
    position: absolute;
    font-size: 180px;
    top: 13px;
    left: 10px;
    font-style: italic;
    font-weight: bolder;
    color: #1db6d2;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    &.letter10{
      transform: scale(.6, 1);
      letter-spacing: -20px;
      left:-25px
    }
    &.letter11{
      transform: scale(.8, 1);
      letter-spacing: -20px;
      left:-20px
    }
    &.letter12{
      transform: scale(.6, 1);
      letter-spacing: -20px;
      left:-30px
    }
  }
  .y{
    position: absolute;
    font-size: 16px;
    bottom: 75px;
    left: 120px;
    font-weight: bolder;
    color: #1db6d2;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
  }
}
.ghost{
  border: solid 1px #1db6d2;
}
.chosenClass{
  background-color: #f1f1f1;
}
.formslabel {
  margin-bottom: 20px;
  display: flex;
}

.boxmain {
  display: flex;

  .forms {
    width: 840px;
  }

  .bar {
    margin-left: 20px;
    //width: 780px;
    height: fit-content;
    //overflow-y: scroll;
  }

  .baseImge1 {
    line-height: 0;
  }
}

.openSucai {
  position: absolute;
  right: -100px;
  bottom: 10px;
  color: #fff;
  background: #36a3f7;
  padding: 15px 0;
  width:150px;
  text-align: center;
  font-size:16px;
  border-bottom-left-radius: 30px;
  border-top-left-radius: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: .1s;
  justify-content: center;
  i{
    margin-right:15px;
    font-size:25px;
  }
  &:hover{
    right: 0px;
  }
}
//如果是ipad

</style>
<style>
@media screen and (max-width: 1200px) {
  .boxmain{
    .bar {
      width: 55% !important;;
      .el-card__body{
        overflow-x:auto !important;;
      }
    }
    .forms{
      width:45% !important;
    }
  }

}
</style>
